<template>
  <view>
    <u-form :model="form" ref="uForm" label-position="top" :label-style="labelStyle" :border-bottom="false">
      <u-form-item label="名称" prop="name" :border-bottom="false">
        <u-input v-model="form.name" :custom-style="customStyle" :clearable="false" />
      </u-form-item>
      <u-form-item label="电话号" prop="phone" :border-bottom="false">
        <u-input v-model="form.phone" :custom-style="customStyle" :clearable="false" />
      </u-form-item>
      <u-form-item label="生日" prop="birth" :border-bottom="false">
        <u-input
          v-model="form.birth"
          :custom-style="customStyle"
          :clearable="false"
          :myicon="true"
          iconname="calendar"
          @click="show = true"
          disabled
        />
        <u-picker mode="time" v-model="show" :params="params"></u-picker>
      </u-form-item>
      <u-form-item label="产品兴趣设置" prop="sex" :border-bottom="false">
        <u-radio-group v-model="value" @change="radioGroupChange" wrap active-color="#F3651F">
          <u-radio name="男">男性</u-radio>
          <u-radio name="女">女性</u-radio>
        </u-radio-group>
      </u-form-item>
    </u-form>
    <SaveButton text="完成设置" :complete="true" />
  </view>
</template>

<script>
  import SaveButton from '@/commponents/public/button/SaveButton'
  export default {
    data() {
      return {
        title: '个人账户',
        show: false,
        value: '',
        labelStyle: {
          fontSize: '34.4rpx',
          color: '#8992A3',
          fontFamily: 'PingFang SC',
          fontWeight: '600'
        },
        customStyle: {
          border: '1px solid #F1F3F9',
          padding: '12rpx 48rpx 12rpx 32rpx',
          borderRadius: '36rpx'
        },
        params: {
          year: true,
          month: true,
          day: true,
          hour: false,
          minute: false,
          second: false
        },
        form: {
          sex: '',
          birth: '',
          name: '',
          phone: ''
        }
      }
    },
    components: {
      SaveButton
    },
    methods: {
      radioGroupChange(name) {}
    }
  }
</script>

<style scoped>
  u-form >>> .u-form {
    padding: 0 48rpx;
  }
  u-form-item >>> .u-form-item--left {
    padding-left: 12rpx;
  }
  u-input >>> .u-input__right-icon__item {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20rpx;
  }
  u-radio {
    margin-top: 40rpx;
  }
  u-radio >>> .u-radio__label {
    margin-left: 28rpx;
  }
</style>
